<template>
    <a-layout class="er-editor-container">
        <a-layout-sider v-model:collapsed="leftCollapsed" collapsible :trigger="null" width="300px" collapsedWidth="30px"
            theme="light" class="left-container">
            <a-affix class="left-affix">
                <menu-unfold-outlined v-if="leftCollapsed" class="toggle-btn"
                    @click="() => (leftCollapsed = !leftCollapsed)" />
                <menu-fold-outlined v-else class="toggle-btn" @click="() => (leftCollapsed = !leftCollapsed)" />
            </a-affix>
            <ErTableStencilList ref="stencilContainerRef" :collapsed="leftCollapsed"></ErTableStencilList>
        </a-layout-sider>
        <a-layout class="right-container">
            <ErGraph ref="erGraphRef" 
            @graphBlankClick="() => (rightCollapsed = true)"
            @graphCellClick="onGraphCellClick"></ErGraph>
            <a-layout-sider class="right-right-container" v-model:collapsed="rightCollapsed" collapsible :trigger="null"
                width="300px" collapsedWidth="30px" theme="light">
                <a-affix class="right-affix">
                    <menu-fold-outlined v-if="rightCollapsed" class="toggle-btn"
                        @click="() => (rightCollapsed = !rightCollapsed)" />
                    <menu-unfold-outlined v-else class="toggle-btn" @click="() => (rightCollapsed = !rightCollapsed)" />
                </a-affix>
                <ErCellDetail ref="erCellDetailRef"></ErCellDetail>
            </a-layout-sider>
        </a-layout>
    </a-layout>
</template>
<script >
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
} from '@ant-design/icons-vue';
import { defineComponent, } from 'vue';
import ErTableStencilList from '../components/ErTableStencilList.vue';
import ErGraph from '../components/ErGraph.vue'
import ErCellDetail from '../components/ErCellDetail.vue';


export default defineComponent({
    name: "ErEditor",
    components: {
        MenuUnfoldOutlined,
        MenuFoldOutlined,
        ErTableStencilList,
        ErGraph,
        ErCellDetail,
    },
    data: () => {
        return {
            leftCollapsed: false,
            rightCollapsed: true,
        }
    },
    methods: {
        getGraph() {
            return this.$refs.erGraphRef.getGraph();
        },
        getErCellDetail(){
            return this.$refs.erCellDetailRef;
        },
        onGraphCellClick({e, x, y, cell, view}){
            console.log("onGraphCellClick",e,x,y,cell,view);
            this.rightCollapsed = false;
            this.getErCellDetail().loadDetailData(cell);
        }
    },
    mounted() {
        const graph = this.getGraph();
        this.$refs.stencilContainerRef.initStencil(graph);
    },
});
</script>
<style>
.er-editor-container,
.stencil-container,
.cell-detail-container-warpper,
.stencil-container-warpper,
.graph-container {
    width: 100%;
    height: 100%;
}

.left-container .stencil-container-warpper,
.right-right-container .cell-detail-container-warpper {
    box-sizing: border-box;
    padding-top: 40px;
}

.stencil-container {
    position: relative;
}

.er-editor-container .toggle-btn {
    font-size: 18px;
    transition: color 0.3s;
}

.er-editor-container .toggle-btn:hover {
    color: #1890ff;
}

.er-editor-container .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
}

.site-layout .site-layout-background {
    background: #fff;
}

.left-affix {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
}

.right-center-container {
    position: relative;
    transform: translateY(0px);
}

.right-center-container .ant-layout-header {
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    line-height: 40px;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 40px;
    background-color: white
}

.right-affix {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
}

.cell-detail-title,
.stencil-title {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 40px;
    height: 40px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    background-color: aliceblue;
}

.cell-detail-container {
    margin: 10px;
}
</style>